<template>
  <div class="register p-5 mt-4">
    <b-row class="mt-5">
      <b-col
        md="8"
        offset-md="2"
        lg="6"
        offset-lg="3"
      >
        <b-card title="登录">
          <b-form>

            <b-form-group label="手机号">
              <b-form-input
                v-model="$v.user.telephone.$model"
                type="text"
                placeholder="请输入手机号"
                :state="validateState('telephone')"
              ></b-form-input>
              <b-form-invalid-feedback :state="validateState('telephone')">
                手机号必须为11位
              </b-form-invalid-feedback>
            </b-form-group>

            <b-form-group label="密码">
              <b-form-input
                v-model="$v.user.password.$model"
                type="password"
                placeholder="请输入密码"
                :state="validateState('password')"
              ></b-form-input>
              <b-form-invalid-feedback :state="validateState('password')">
                密码必须大于6位
              </b-form-invalid-feedback>
            </b-form-group>
            <b-form-group>
              <b-button variant="outline-primary" block @click="login">登录</b-button>
            </b-form-group>
          </b-form>
        </b-card>
      </b-col>
    </b-row>
  </div>
</template>

<script>
    import { required, minLength } from 'vuelidate/lib/validators'
    import customValidator from '../utils/validator'

    export default {
      name: 'login',
      data () {
        return { 
          user: {
            telephone: '',
            password: '',
          },
          showTelephoneValidate: false,
         }
      },
      validations: {
        user: {
          telephone: {
            required,
            telephone: customValidator.telephoneValidator,
          },
          password: {
            required,
            maxLength: minLength(6),
          }
        }
      },
      methods: {
        validateState(name) {
          // es6机构赋值
          const {$dirty, $error} = this.$v.user[name]
          return $dirty ? !$error : null
        },
        login() {

        }
      }
    }
</script>

<style scoped>

</style>